<template>
  <view class="post-container">
    <!-- 页面主体内容 -->
    <view class="content-wrapper">
      <!-- 内容输入区 -->
      <view class="content-area">
        <textarea 
          class="content-input" 
          v-model="content" 
          placeholder="分享你的想法..." 
          maxlength="500"
          auto-height
        />
        <view class="word-count">{{ content.length }}/500</view>
      </view>
      
      <!-- 图片上传区 -->
      <view class="image-upload-area">
        <view class="image-list">
          <view 
            class="image-item" 
            v-for="(image, index) in images" 
            :key="index"
          >
            <image :src="image" mode="aspectFill" class="preview-image" />
            <view class="delete-btn" @click="removeImage(index)">
              <text class="iconfont icon-close">×</text>
            </view>
          </view>
          <view class="upload-btn" v-if="images.length < 9" @click="chooseImage">
            <text class="iconfont icon-camera">📷</text>
            <text class="upload-text">添加图片</text>
          </view>
        </view>
      </view>
      
      <!-- 标签选择区 -->
      <view class="tag-select-area">
        <view class="section-title">选择标签</view>
        <view class="tag-list">
          <view 
            v-for="tag in tagList" 
            :key="tag.id" 
            class="tag-item" 
            :class="{ active: selectedTag === tag.id }"
            @click="selectTag(tag.id)"
          >
            {{ tag.name }}
          </view>
        </view>
      </view>
      
      <!-- 匿名选项 -->
      <view class="anonymous-option">
        <view class="option-label">匿名发布</view>
        <switch 
          :checked="isAnonymous" 
          @change="toggleAnonymous" 
          color="#007aff"
        />
      </view>
      
      <!-- 提示信息 -->
      <view class="tips-area">
        <text class="tips-text">提示：匿名发布后，其他用户将无法看到你的身份信息</text>
      </view>
    </view>
    
    <!-- 底部发布按钮 -->
    <view class="bottom-publish-bar">
      <button class="publish-btn" :disabled="!canPublish" @click="publishPost">发布</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

// 标签列表
const tagList = computed(() => {
  // 过滤掉"全部"和"已关注"标签
  return store.getters['community/tagList'].filter(tag => 
    tag.id !== 'all' && tag.id !== 'followed'
  );
});

// 内容
const content = ref('');

// 图片列表
const images = ref([]);

// 选中的标签
const selectedTag = ref('recruit');

// 是否匿名
const isAnonymous = ref(false);

// 是否可以发布
const canPublish = computed(() => {
  return content.value.trim().length > 0;
});

// 生命周期钩子
onMounted(async () => {
  // 获取标签列表
  if (store.getters['community/tagList'].length === 0) {
    await store.dispatch('community/fetchTagList');
  }
});

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - images.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      // 合并图片列表
      images.value = [...images.value, ...res.tempFilePaths];
    }
  });
};

// 移除图片
const removeImage = (index) => {
  images.value.splice(index, 1);
};

// 选择标签
const selectTag = (tagId) => {
  selectedTag.value = tagId;
};

// 切换匿名状态
const toggleAnonymous = (e) => {
  isAnonymous.value = e.detail.value;
};

// 发布动态
const publishPost = async () => {
  if (!canPublish.value) {
    return;
  }
  
  // 显示加载中
  uni.showLoading({
    title: '发布中...',
    mask: true
  });
  
  try {
    // 发布动态
    const result = await store.dispatch('community/createPost', {
      content: content.value,
      images: images.value,
      tag: selectedTag.value,
      isAnonymous: isAnonymous.value
    });
    
    if (result) {
      uni.showToast({
        title: '发布成功',
        icon: 'success'
      });
      
      // 返回上一页
      setTimeout(() => {
        goBack();
      }, 1500);
    } else {
      uni.showToast({
        title: '发布失败，请重试',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('发布动态失败', error);
    uni.showToast({
      title: '发布失败，请重试',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.post-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  padding-bottom: 80px; /* 为底部发布栏留出空间 */
  
  .content-wrapper {
    flex: 1;
    padding: 16px;
    padding-bottom: 30px;
  }
  
  /* 底部发布栏样式 */
  .bottom-publish-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 80px;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    
    .publish-btn {
      width: 85%;
      max-width: 320px;
      height: 50px;
      line-height: 50px;
      font-size: 17px;
      color: #ffffff;
      background-color: #007aff;
      border-radius: 25px;
      padding: 0;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
      
      &:disabled {
        background-color: #cccccc;
        box-shadow: none;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
  
  .content-area {
    padding: 24px 20px;
    position: relative;
    background-color: #ffffff;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    
    .content-input {
      width: 100%;
      min-height: 150px;
      font-size: 17px;
      color: #333333;
      line-height: 1.6;
      padding: 0;
    }
    
    .word-count {
      position: absolute;
      right: 20px;
      bottom: 8px;
      font-size: 13px;
      color: #999999;
      background-color: rgba(255, 255, 255, 0.85);
      padding: 4px 10px;
      border-radius: 15px;
    }
  }
  
  .image-upload-area {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    
    .image-list {
      display: flex;
      flex-wrap: wrap;
      
      .image-item {
        width: calc((100% - 16px) / 3);
        height: 0;
        padding-bottom: calc((100% - 16px) / 3);
        margin-right: 8px;
        margin-bottom: 8px;
        position: relative;
        
        &:nth-child(3n) {
          margin-right: 0;
        }
        
        .preview-image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 12px;
        }
        
        .delete-btn {
          position: absolute;
          top: -8px;
          right: -8px;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          
          .iconfont {
            font-size: 14px;
            color: #ffffff;
          }
        }
      }
      
      .upload-btn {
        width: calc((100% - 16px) / 3);
        height: 0;
        padding-bottom: calc((100% - 16px) / 3);
        margin-right: 8px;
        margin-bottom: 8px;
        border: 1px dashed #dddddd;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        
        &:nth-child(3n) {
          margin-right: 0;
        }
        
        .iconfont {
          font-size: 24px;
          color: #999999;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -70%);
        }
        
        .upload-text {
          font-size: 12px;
          color: #999999;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, 50%);
          white-space: nowrap;
        }
      }
    }
  }
  
  .tag-select-area {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    
    .section-title {
      font-size: 17px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 16px;
    }
    
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      
      .tag-item {
        padding: 8px 16px;
        margin-right: 12px;
        margin-bottom: 12px;
        font-size: 15px;
        color: #666666;
        background-color: #f8f8f8;
        border-radius: 20px;
        transition: all 0.3s;
        
        &.active {
          color: #ffffff;
          background-color: #007aff;
          font-weight: 500;
        }
      }
    }
  }
  
  .anonymous-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 20px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    
    .option-label {
      font-size: 16px;
      color: #333333;
    }
  }
  
  .tips-area {
    padding: 16px 20px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    
    .tips-text {
      font-size: 12px;
      color: #999999;
    }
  }
}
</style>
